<template>
    <div class="view">
        <div class="detail-view">
            <div class="left">
                <table>
                    <tr>
                        <td class="td-item">会员卡：</td>
                        <td>
                            <Input v-model="cardNo" placeholder="请刷卡获取会员卡信息" class="input"></Input>
                            <Button type="primary" @click="blurCardNo">查询</Button>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-item">手机号：</td>
                        <td>
                            <Input v-model="phone" :maxlength="11" placeholder="请输入手机号" class="input"></Input>
                            <Button type="primary" @click="blurPhone">查询</Button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <p 
                                class="card-item" 
                                :class="{'card-active': cardIndex === index}" 
                                v-for="(item, index) in rcardBean" 
                                :key="index" @click="clickCard(item, index)">
                                {{item.cardNo}}
                            </p>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="td-item">姓名：</td>
                        <td><p>{{memberData.userName}}</p></td>
                    </tr>
                    <tr>
                        <td class="td-item">会员类型：</td>
                        <td><p>{{memberData.cardTypeName}}</p></td>
                    </tr>
                    <tr>
                        <td class="td-item">发卡单位：</td>
                        <td><p>{{memberData.theatreNme}}</p></td>
                    </tr>
                </table>
            </div>
            <div class="right">
                <table>
                    <tr>
                        <td class="td-item">余额：</td>
                        <td><p>{{memberData.balance}}元</p></td>
                    </tr>
                    <tr>
                        <td class="td-item">赠送余额：</td>
                        <td><p>{{memberData.presentBalance == 'null'? '0': memberData.presentBalance}}元</p></td>
                    </tr>
                    <tr>
                        <td class="td-item">积分：</td>
                        <td><p>{{memberData.point == 'null'? '0': memberData.point}}</p></td>
                    </tr>
                    <!-- <tr>
                        <td class="td-item">会员等级：</td>
                        <td><p>{{memberData.level}}</p></td>
                    </tr> -->
                    <tr v-if="memberData.teamName != null">
                        <td class="td-item">标签：</td>
                        <td><p>{{memberData.teamName}}</p></td>
                    </tr>
                    <tr>
                        <td class="td-item">会员状态：</td>
                        <td><p>{{memberData.cardStatus == 0? '空卡' : memberData.cardStatus == 1? '正常' : memberData.cardStatus == 2? '挂失': memberData.cardStatus == 3? '作废' : memberData.cardStatus == 4? '冻结': ''}}</p></td>
                    </tr>
                    <tr>
                        <td class="td-item">授信额度：</td>
                        <td><p>{{memberData.presentBalance == 'null'? '0': memberData.presentBalance}}元</p></td>
                    </tr>
                    <tr>
                        <td class="td-item">还款日：</td>
                        <td><p>{{memberData.point == 'null'? '-/-': memberData.point}}</p></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="record-view">
            <div class="record-head">
                <p 
                    @click="changeTabs(index)" 
                    v-for="(item, index) in recordHeadList" 
                    :key="index" 
                    :class="{'active': currentIndex === index}">
                    {{item}}
                </p>
                <div class="action-view">
                    <Button type="primary" 
                        v-for="(item, index) in btnList" 
                        :key="index" 
                        @click="clickAction(index)"
                        v-if="memberData.cid != null">
                        {{item}}
                    </Button>
                </div>
            </div>
            <div class="record-table">
                <XMemberListView
                    :data="consumeData"
                    @on-change-page="changePage"
                    @on-change-pageSize="changePageSize"
                    v-if="currentIndex == 0">
                </XMemberListView>
                <XMemberListView
                    :data="payData"
                    @on-change-page="changePage"
                    @on-change-pageSize="changePageSize"
                    v-if="currentIndex == 1">
                </XMemberListView>
                <XMemberListView
                    :data="pointData"
                    @on-change-page="changePage"
                    @on-change-pageSize="changePageSize"
                    v-if="currentIndex == 2">
                </XMemberListView>
            </div>
        </div>

        <!-- 挂失 -->
        <div v-if="reportData.isShow">
            <XReportModal 
                :data="reportData"
                @on-submit="submitReport">
            </XReportModal>
        </div>
        <!-- 修改手机号 -->
        <div v-if="changePhoneData.isShow">
            <XChangePhoneModal
                :data="changePhoneData"
                @on-submit="submitPhone">
            </XChangePhoneModal>
        </div>
        <!-- 修改密码 -->
        <div v-if="changePwdData.isShow">
            <XChangePwdModal
                :data="changePwdData"
                @on-submit="submitPwd">
            </XChangePwdModal>
        </div>
        <!-- 换卡 -->
        <div v-if="changeCardData.isShow">
            <XChangeCardModal
                :data="changeCardData"
                @on-submit="submitCard">
            </XChangeCardModal>
        </div>
        <!-- 充值 -->
        <div v-if="rechargeData.isShow">
            <XRechargeModal 
                :data="rechargeData"
                @on-submit="submitRecharge">
            </XRechargeModal>
        </div>
        <!-- 授信 -->
        <div v-if="empowerData.isShow">
            <XEmpowerModal
                :data="empowerData">
            </XEmpowerModal>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
import memberService from '@/network/service/memberService.js'
import receiptService from '@/network/service/receiptService.js'

import XMemberListView from '@/pages/member/view/XMemberListView'
import XReportModal from '@/pages/member/view/XReportModal'
import XChangePhoneModal from '@/pages/member/view/XChangePhoneModal'
import XChangePwdModal from '@/pages/member/view/XChangePwdModal'
import XChangeCardModal from '@/pages/member/view/XChangeCardModal'
import XRechargeModal from '@/pages/member/view/XRechargeModal'
import XEmpowerModal from '@/pages/member/view/XEmpowerModal'

import {printMember,printDeposit} from '@/common/js/printBean.js'
import {formatTimestamp} from '@/common/js/date_util.js'
    export default {
        components: {
            XMemberListView,
            XReportModal,
            XChangePhoneModal,
            XChangePwdModal,
            XChangeCardModal,
            XRechargeModal,
            XEmpowerModal
        },
        data() {
            return {
                cardNo: '',
                phone: '',
                memberData: {
                    cid: null,
                    userName: null,
                    cardType: null,
                    cardTypeName: null,
                    idNo: null,
                    theatreNme: null,
                    level: null,
                    balance: null,
                    presentBalance: null,
                    point: null,
                    teamName: null,
                    cardStatus: null,
                },
                rcardBean: [],
                cardIndex: 0,
                currentIndex: 0,
                recordHeadList: ['近期消费', '充值记录', '积分列表'],
                btnList: ['挂失', '修改手机号', '修改密码', '换卡', '充值', '授信'],
                consumeData: {
                    listType: 'consume',
                    data: [],
                    page: {
                        currentPage: 0,
                        pagesize: 20,
                        type: 1,
                        totalSize: 0,
                    }
                },
                payData: {
                    listType: 'pay',
                    data: [],
                    page: {
                        currentPage: 0,
                        pagesize: 20,
                        type: 2,
                        totalSize: 0,
                    }
                },
                pointData: {
                    listType: 'point',
                    data: [],
                    page: {
                        currentPage: 0,
                        pagesize: 20,
                        type: 3,
                        totalSize: 0,
                    }
                },
                reportData: {//挂失
                    isShow: false,
                    isLoading: false,
                    data: {}
                },
                changePhoneData: {//修改手机号
                    isShow: false,
                    isLoading: false,
                    data: {}
                },
                changePwdData: {//修改密码
                    isShow: false,
                    isLoading: false,
                    data: {}
                },
                changeCardData: {//换卡
                    isShow: false,
                    isLoading: false,
                    data: {}
                },
                rechargeData: {//充值
                    isShow: false,
                    isLoading: false,
                    row: null,
                    data: {
                        money: 123
                    }
                },
                empowerData: {
                    isShow: false,
                    isLoading: false,
                    data: {
                        cid: null,
                        userId: null,
                        repayment: null,
                        money: null
                    }
                },
                printData: {
                    tName: null,
                    cardNo: null,
                    cardType: null,
                    integral: '-/-',
                    price: null,
                    money: null,
                    balance: null,
                    createTime: null,
                    payWayList: [
                        {
                            payWay: null,
                            money: null
                        }
                    ],
                    account: null,
                    printNum: null,
                    printTime: null,
                    phoneNum: null,
                }
            }
        },
        mounted() {
            let input = $('.ivu-input');
            let table = $('.ivu-table');
            for(let i = 0; i < input.length; i++) {
                input[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
            for(let i = 0; i < table.length; i++) {
                table[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
            let select = $('.ivu-select');
            let pageInput = $('.ivu-page-options-elevator input');
            for(let i = 0; i < select.length; i++) {
                select[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
            for(let i = 0; i < pageInput.length; i++) {
                pageInput[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
        },
        methods: {
            blurCardNo() {
                this.getCardIdBean('', this.cardNo);
            },
            blurPhone() {
                this.getCardList();
            },
            changeTabs(index) {
                this.currentIndex = index;
                let params = {};
                if (index == 0) {
                    params = {
                        cid: this.memberData.cid,
                        type: 1,
                        page: this.consumeData.page.currentPage,
                        pageSize: this.consumeData.page.pagesize
                    }
                } else if (index == 1) {
                    params = {
                        cid: this.memberData.cid,
                        type: 2,
                        page: this.payData.page.currentPage,
                        pageSize: this.payData.page.pagesize
                    }
                } else if (index == 2) {
                    params = {
                        cid: this.memberData.cid,
                        type: 3,
                        page: this.pointData.page.currentPage,
                        pageSize: this.pointData.page.pagesize
                    }
                }
                if (this.memberData.cid != '' && this.memberData.cid != null) {
                    this.getCardBean(params);
                }
            },
            changePage(type, page) {
                let params = {
                    cid: this.memberData.cid,
                    type: null,
                    page: page - 1,
                    pageSize: null
                };
                if (type == 'consume') {
                    params.type = 1;
                    params.pageSize = this.consumeData.page.pagesize;
                } else if (type == 'pay') {
                    params.type = 2;
                    params.pageSize = this.payData.page.pagesize;
                } else if (type == 'point') {
                    params.type = 3;
                    params.pageSize = this.pointData.page.pagesize;
                }
                this.getCardBean(params)
            },
            changePageSize(type, pageSize) {
                let params = {
                    cid: this.memberData.cid,
                    type: null,
                    page: null,
                    pageSize: pageSize
                };
                if (type == 'consume') {
                    params.type = 1;
                    params.page = this.consumeData.page.currentPage;
                } else if (type == 'pay') {
                    params.type = 2;
                    params.page = this.payData.page.currentPage;
                } else if (type == 'point') {
                    params.type = 3;
                    params.page = this.pointData.page.currentPage;
                }
                this.getCardBean(params)
            },
            clickCard(item, index) {
                this.rechargeData.row = item;
                this.cardIndex = index;
                this.getCardIdBean(item.cid, item.cardNo);
            },
            clickAction(index) {
                if (index == 0) {
                    this.reportData.isShow = true;
                    this.reportData.data = {};
                } else if (index == 1) {
                    this.changePhoneData.isShow = true;
                    this.changePhoneData.data = {};
                } else if (index == 2) {
                    this.changePwdData.isShow = true;
                    this.changePwdData.data = {};
                } else if (index == 3) {
                    this.changeCardData.isShow = true;
                    this.changeCardData.data = {};
                } else if (index == 4) {
                    this.rechargeData.isShow = true;
                    this.rechargeData.data = {
                        money: 0
                    }
                } else if (index == 5) {
                    this.empowerData.isShow = true;
                }
            },
            submitReport(formData) {
                this.report(formData);
            },
            submitPhone(formData) {
                this.updateCardPhone(formData);
            },
            submitPwd(formData) {
                this.updateCardPwd(formData);
            },
            submitCard(formData) {
                this.updateCard(formData);
            },  
            submitRecharge(formData) {
                // console.log(formData);
                
                this.$Modal.confirm({
                    title: '确认充值',
                    content: '是否确认充值该会员卡？',
                    onOk: () => {
                        this.rechargeCard(formData);
                    }
                });
            },

            getCardIdBean(cid, cardNo) {
                let params = {
                    cid: cid,
                    cardNo: cardNo
                }
                memberService.getCardIdBean(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.memberData = {
                            cid: result.data.cid,
                            userName: result.data.userName,
                            cardTypeName: result.data.cardTypeName,
                            idNo: result.data.idNo,
                            theatreNme: result.data.theatreNme,
                            level: result.data.level,
                            balance: result.data.balance,
                            presentBalance: result.data.presentBalance,
                            point: result.data.point,
                            teamName: result.data.teamName,
                            cardStatus: result.data.cardStatus
                        }
                        if (result.data.rconsumptionBean != null) {
                            this.consumeData.data = result.data.rconsumptionBean;
                            this.consumeData.page.totalSize = result.data.totalSize;
                        } else {
                            this.consumeData.data = [];
                        }
                        if (result.data.rrechargeRecordBean != null) {
                            this.payData.data = result.data.rrechargeRecordBean;
                            this.payData.page.totalSize = result.data.totalSize;
                        } else {
                            this.payData.data = [];
                        }
                        if (result.data.rpointsRcordBean != null) {
                            this.pointData.data = result.data.rpointsRcordBean;
                            this.pointData.page.totalSize = result.data.totalSize;
                        } else {
                            this.pointData.data = [];
                        }
                        this.printData.tName = result.data.theatreNme;
                        this.printData.cardNo = result.data.cardNo;
                        this.printData.cardType = result.data.cardTypeName;
                        this.printData.tName = result.data.theatreNme;
                        this.printData.tName = result.data.theatreNme;

                    } else {
                        this.$Message.error(resmsg)
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            getCardList() {
                memberService.getCardList(this.phone).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.rcardBean = result.data.rcardBean;
                        if (result.data.rcardBean.length != 0) {
                            this.getCardIdBean(result.data.rcardBean[0].cid, result.data.rcardBean[0].cardNo)
                            this.rechargeData.row = result.data.rcardBean[0]
                        } else {
                            this.$Message.info('该手机号未办理会员卡');
                        }
                    } else {
                        this.rcardBean = [];
                        this.$Message.error(resmsg)
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            getCardBean(formData) {
                memberService.getCardBean(formData).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        if (formData.type == 1) {
                            if (result.data.rconsumptionBean != null) {
                                this.consumeData.data = result.data.rconsumptionBean;
                                this.consumeData.page.totalSize = result.data.totalSize;
                            } else {
                                this.consumeData.data = [];
                            }
                        } else if (formData.type == 2) {
                            if (result.data.rrechargeRecordBean != null) {
                                this.payData.data = result.data.rrechargeRecordBean;
                                this.payData.page.totalSize = result.data.totalSize;
                            } else {
                                this.payData.data = [];
                            }
                        } else if (formData.type == 3) {
                            if (result.data.rpointsRcordBean != null) {
                                this.pointData.data = result.data.rpointsRcordBean;
                                this.pointData.page.totalSize = result.data.totalSize;
                            } else {
                                this.pointData.data = [];
                            }
                        }
                    } else {
                        this.$Message.error(resmsg)
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            report(formData) {
                let params = {
                    cid: this.memberData.cid,
                    password: formData.data.password
                }
                formData.isLoading = true;
                memberService.updateCardStatus(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        formData.isShow = false;
                        formData.isLoading = false;
                    } else {
                        this.$Message.error(resmsg)
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            updateCardPhone(formData) {
                let params = {
                    cid: this.memberData.cid,
                    phone: formData.data.phone,
                    vcode: formData.data.vcode,
                    password: formData.data.password
                }
                memberService.updateCardPhone(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    formData.isLoading = true;
                    if (code == 100) {
                        this.$Message.success(resmsg);
                        formData.isShow = false;
                        formData.isLoading = false;
                    } else {
                        formData.isLoading = false;
                        this.$Message.error(resmsg)
                    }
                }, error => {
                    formData.isLoading = false;
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            updateCardPwd(formData) {
                let params = {
                    cid: this.memberData.cid,
                    password: formData.data.password,
                    newPassword: formData.data.newPassword,
                    submitPassword: formData.data.submitPassword
                }
                formData.isLoading = true;
                memberService.cardPassword(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.$Message.success(resmsg);
                        formData.isShow = false;
                        formData.isLoading = false;
                    } else {
                        formData.isLoading = false;
                        this.$Message.error(resmsg)
                    }
                }, error => {
                    formData.isLoading = false;
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            updateCard(formData) {
                let params = {
                    cid: this.memberData.cid,
                    cardCategoryId: formData.data.cardCategoryId,
                    cardNo: formData.data.cardNo,
                    password: formData.data.password
                }
                formData.isLoading = true;
                memberService.updateCardNo(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.$Message.success(resmsg);
                        this.getCardList();
                        formData.isShow = false;
                        formData.isLoading = false;
                    } else {
                        formData.isLoading = false;
                        this.$Message.error(resmsg)
                    }
                }, error => {
                    formData.isLoading = false;
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            rechargeCard(formData) {
                let params = {
                    did: '6',
                    cid: formData.row.cid,
                    cardNo: formData.row.cardNo,
                    money: formData.data.money,
                }
                formData.isLoading = false;
                memberService.addCardOrder(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.$Message.success('充值成功')
                        formData.isShow = false;
                        this.memberData.balance = result.data.balance;
                        this.printData.price = +result.data.balance - +result.data.money;
                        this.printData.money = +result.data.money;
                        this.printData.balance = +result.data.balance;
                        this.printData.createTime = formatTimestamp(result.data.createTime / 1000);
                        this.printReceipt()
                    } else {
                        formData.isLoading = false;
                        this.$Message.error(resmsg)
                    }
                }, error => {
                    formData.isLoading = false;
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            printReceipt() {
                let printData = this.printData;
                let params = {
                    tName: printData.tName,
                    cardNo: printData.cardNo,
                    cardType: printData.cardType,
                    integral: '-/-',
                    price: printData.price,
                    money: printData.money,
                    balance: printData.balance,
                    createTime: printData.createTime,
                    payWayList: [
                        {
                            payWay: '现金',
                            money: printData.money
                        }
                    ],
                    account: this.$store.getters.account.name,
                    printNum: '1',
                    printTime: printData.createTime,
                    phoneNum: '010-12345678'
                }
                let printText = printMember(params);
                console.log(printMember(params));
                receiptService.printReceipt(printText).then(res => {
                    console.log(res);
                }, error => {
                    console.log(error);
                })
            }
        }
    }
</script>

<style scoped lang="less">
.view {
    width: 100%;
    height: 100%;
    padding: .2rem .3rem;
    color: #fff;
    .detail-view {
        display: flex;
        margin-bottom: .2rem;
        .td-item {
            text-align: right;
            width: 1rem;
            color: rgba(255, 255, 255, 0.6)
        }
        p {
            color: rgba(255, 255, 255, 0.6);
        }
        .left {
            width: 7rem;
            table {
                width: 100%;
                .card-item {
                    cursor: pointer;
                    display: inline-block;
                    background: rgba(255, 255, 255, 0.2);
                    border-radius: .08rem;
                    padding: 0 .18rem;
                    margin-top: .1rem;
                    margin-right: .1rem;
                    border: .01rem solid rgba(255, 255, 255, 0.2);
                }
                .card-active {
                    border: .01rem solid #CD2A86;
                }
                .input {
                    width: 3rem;
                }
                td {
                    line-height: .6rem;
                }
            }
        }
        .right {
            table {
                width: 100%;
                td {
                    line-height: .6rem;
                }
            }
        }
    }
    .record-view {
        .record-head {
            display: flex;
            border-bottom: .01rem solid rgba(255, 255, 255, 0.2);
            position: relative;
            p {
                height: .45rem;
                line-height: .45rem;
                margin: 0 .2rem;
                color: rgba(255, 255, 255, 0.6);
                cursor: pointer;
            }
            .active {
                border-bottom: .01rem solid #D5CED2;
            }
            .action-view {
                position: absolute;
                top: 0rem;
                right: .1rem;
                button {
                    margin-right: .2rem;
                    width: 1.3rem;
                }
            }
        }
        .record-table {
        }
    }
}
</style>